import React from 'react';
import {Button, Flex, Form, Input} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";

interface IProps<T> {
    name: keyof T,
    label: string,
}

/**
 * InputMultiple 组件 输入更多的参数
 * @param props
 * @constructor
 */
const InputMultiple = <T extends object>(props: IProps<T>) => {
    const { name, label } = props;
    return (
        <Form.Item<T> name={name as any} label={label}>
            <Form.List name={name as string}>
                {(fields, {add, remove}) =>
                    <>
                        {fields.map(({key, name, ...restField}) =>
                            <Flex gap={15} key={key} style={{display: 'flex'}} align="baseline">
                                <Form.Item
                                    style={{width: "150px"}}
                                    {...restField}
                                    name={[name, 'first']}
                                    rules={[{required: true, message: 'Missing object key'}]}
                                >
                                    <Input placeholder="Object key"/>
                                </Form.Item>
                                <Form.Item
                                    style={{width: "100%"}}
                                    {...restField}
                                    name={[name, 'last']}
                                    rules={[{required: true, message: 'Missing object value'}]}
                                >
                                    <Input placeholder="Object value"/>
                                </Form.Item>
                                <MinusCircleOutlined onClick={() => remove(name)}/>
                            </Flex>
                        )}
                        <Form.Item>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined/>}>
                                添加参数
                            </Button>
                        </Form.Item>
                    </>
                }
            </Form.List>
        </Form.Item>
    );
};

export default InputMultiple;